<template>
    <view class="uni-shadow fohf-item" @tap.stop="detail">
        <view class="font-bold u-text-left name u-line-1" @longtap="longTap(fohfItem.name)">{{fohfItem.name}}</view>
        <view class="u-m-t-10 u-flex u-flex-wrap">
            <view v-for="(item,index) in fohfItem.list" :key="index" class="u-m-t-20 u-flex u-font-26 item">
                <text class="u-m-r-16 uni-dec-color">{{item.title}}</text>
                <text class="u-line-1" style="max-width:58%" @longtap="longTap(item.value)">{{item.value}}</text>
            </view>
        </view>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    name:'fohfItem',
    props:{
        listItem:{
            type: Object,
            default(){
                return {}
            }
        }
    },

    data(){
        return{
            fohfItem:{
                name: '专户名称', // zhmc
                list:[
                    { field:'districtName', title:'属地名称', value:'某某项目' },
                    { field:'sgdwmc', title:'施工单位', value:'513' },
                    { field:'xmtype', title:'项目类型', value:'一师' },
                    { field:'khh', title:'开户行', value:'木工' },
                    { field:'xmmc', title:'项目名称', value:'无敌小霸王' },
                    { field:'zhyeNew', title:'专户余额', value:'200万元' },
                ]
            }
        }
    },

    created(){
        // 处理数据格式
        this.fohfItem.name = this.listItem.zhmc?this.listItem.zhmc:'暂未返回数据'
        this.fohfItem.list.map((v,i)=>{
            v.value = this.listItem[v.field]?this.listItem[v.field]:'暂未返回数据'
        })
    },

    methods: {
        // 长按事件
        longTap(value){
            this.$refs.uToast.show({
                message: value,
                type: 'default',
                duration: 3000
            })
        },
        // 专户详情
        detail(){
            uni.navigateTo({
                url: '/pages/fohf-bag/detail?id='+this.listItem.id
            })
        }
    },
}
</script>

<style scoped lang="scss">
    .fohf-item{
        .name{
            width: 100%;
        }
        .item{
            width: 50%;
        }
    }
</style>